<template>
	<view class="h-100">
		<view class="header-area">
			<commonTab :nowCurrent="1"></commonTab>
			<!-- 轮播图 -->
			<swipers :pid="13" height="248rpx" padding="30rpx"></swipers>
		</view>
		<view class="main-content-area bg-white">
			<view class="u-flex u-padding-right-25 u-padding-top-15 u-padding-left-10">
				<u-search placeholder="请输入要查询的内容" v-model="keyword" wrapBgColor="transparent" bg-color="#F2F3F5"
					@search="serachKeyword" @clear="serachKeyword"></u-search>
				<u-icon class="u-padding-right-25" @click="actionSheetShowStatus = true" :label="actionSheetLists[type].text||''" size="25"
					name="https://resource.lanbaozixun.com/uploads/images/202410051718272965b9904.png"></u-icon>
				<u-icon @click="showRegion = true" :label="city" size="25"
					name="https://resource.lanbaozixun.com/uploads/images/2024100510263857d823927.png"></u-icon>
			</view>

			<view class="information-lists-area">
				<navigator hover-class="none" :url="`/yixu/pages/network_square/peer_business_card/info?user_id=${v.user_id}`" class="information-item u-padding-30" v-for="(v,k) in listDatas" :key="k">
					<view class="u-flex u-padding-bottom-30">
						<u-avatar :src="v.avatar" :size="86"></u-avatar>
						<view class="u-flex u-flex-1 u-padding-left-25">
							<view class="u-flex-1">
								<view class="u-flex u-margin-bottom-10">
									<text class="bold u-padding-right-25">{{v.name}}</text>
									<text class="xs u-color-0099FF">同行查看 {{v.view_count||0}} 次</text>
								</view>
								<view class="u-color-666666 u-flex">
									<u-icon v-if="v.company_city" :label="v.company_city" size="35" name="map"></u-icon>
									<text v-if="v.company_city" class="u-padding-left-10 u-margin-right-10">|</text>
									<text v-if="v.position">{{v.position}}</text>
									<view v-if="!v.company_city && !v.position" class="xxs u-color-666666">
										暂未设置公司信息~
									</view>
								</view>
							</view>
							<u-button hover-class="none" size="mini" shape="circle" :custom-style="{
									color: '#FFFFFF',
									background: '#0099FF',
									borderColor: '#0099FF'
								}">打招呼</u-button>
						</view>
					</view>
					<u-gap height="2" bg-color="#F2F3F5"></u-gap>
					<view class="u-margin-top-25" v-if="v.company_name || v.business.length > 0">
						<view class="xs u-color-666666 u-padding-bottom-10">{{v.company_name}}</view>
						<view class="xxs u-flex lable-area u-color-0099FF">
							<text class="lable-item" v-for="(item,index) in v.business" :key="index">{{item}}</text>
						</view>
					</view>
					<view class="area-bg u-padding-25 u-margin-top-25 u-margin-bottom-25 nr u-color-333333">
						<view class="u-font-weight-500">
							描述：
						</view>
						<view class="nr u-margin-top-15">
							{{v.intro||'--'}}
						</view>
					</view>
					
					<u-gap height="2" bg-color="#F2F3F5" v-if="(k + 1) < listDatas.length"></u-gap>
				</navigator>
				<u-empty v-if="listDatas.length <= 0" class="u-padding-top-50 u-padding-bottom-50" text="暂无数据" mode="list"></u-empty>
			</view>
		</view>
		<common-tabbar></common-tabbar>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
		<u-select v-model="showRegion" mode="mutil-column-auto" @confirm="selectCity" :list="area"></u-select>
		<u-action-sheet :z-index="1999" :border-radius="15" :bottomBorder="false" :list="actionSheetLists" v-model="actionSheetShowStatus" @click="selectType"></u-action-sheet>
	</view>
</template>

<script>
	import {
		queryPeerBusinessCardLists
	} from '@/api/networkSquare'
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from '@/utils/tools'
	import area from '@/utils/area'
	import {
		mapGetters,
	} from "vuex";
	import Cache from "@/utils/cache";
	import wechath5 from '@/utils/wechath5'
	import commonTab from '@/yixu/pages/network_square/components/common_tab.vue'
	export default {
		components: {
			commonTab
		},
		data() {
			return {
				area: [],
				type: 0,
				page: 1,
				city: '全国',
				city_id: '',
				keyword: '',
				listDatas: [],
				showRegion: false,
				actionSheetLists: [{
					text: '综合'
				}, {
					text: '最新'
				}, {
					text: '最热'
				}, {
					text: '最活跃'
				}],
				loadingShowStatus: true,
				actionSheetShowStatus: false,
				status: loadingType.LOADING,
			};
		},
		onLoad() {
			this.queryListFun()
			let showArea = area
			showArea.forEach(({
				children
			}) => {
				children.forEach(item => {
					delete item.children;
				});
			});
			showArea.unshift({
				label:'全国',
				value:'0',
				children:[{
					label:'全国',
					value:'0',
				}]
			})
			this.area = showArea;
			uni.$once('h5ShareSetFinished',function(w,o){
				o.shareTitle = '同行名片';
				o.shareDesc = '同行名片';
				w.share(o)
			})
		},
		onReachBottom() {
			this.queryListFun()
		},
		onShareAppMessage() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '同行名片',
				path: "yixu/pages/network_square/peer_business_card/lists?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onShareTimeline() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '同行名片',
				path: "yixu/pages/network_square/peer_business_card/lists?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		methods: {
			selectCity(e){
				this.clearDatas();
				if(e[1].value) this.city = e[1].label;
				if(e[1].value) this.city_id = e[1].value;
				this.queryListFun()
			},
			serachKeyword(){
				this.clearDatas();
				this.queryListFun()
			},
			selectType(e){
				this.clearDatas();
				this.type = e;
				this.queryListFun()
			},
			clearDatas(){
				this.page = 1;
				this.listDatas = [];
				this.status = loadingType.LOADING;
			},
			queryListFun() {
				let requestParams = {
					type: this.type,
					city_id: this.city_id,
					keyword: this.keyword
				}

				loadingFun(queryPeerBusinessCardLists, this.page, this.listDatas, this.status, requestParams).then(res => {
					if (res) {
						this.page = res.page;
						this.status = res.status
						this.listDatas = res.dataList
						this.loadingShowStatus = false
					}
				})
			},
		},
		computed: {
			...mapGetters(["inviteCode"])
		}
	}
</script>

<style lang="scss" scoped>
	page {
		min-height: 100vh;
		background: #FFFFFF;
		
		.h-100{
			min-height: 100vh;
		}

		.header-area {
			// background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(224, 242, 255, 1) 23.69%, rgba(156, 215, 255, 1) 72.53%, rgba(120, 201, 255, 1) 100%);

			.classify-area {
				padding: 0 35rpx;
				width: calc(100vw - 70rpx);
				// background: rgba(224, 242, 255, 1);


				.classify-item {
					flex-shrink: 0;
					padding: 8rpx 24rpx;
					display: inline-block;
					border-radius: 12rpx;
					margin-right: 16rpx;
					background: rgba(26, 26, 26, 0.06);
				}

				.classify-select {
					color: #0099FF;
					background: rgba(82, 185, 254, 0.12) !important;
				}
			}
		}

		.main-content-area {
			overflow: hidden;
			border-radius: 10rpx 10rpx 0 0;
		}

		.lable-area {
			.lable-item {
				padding-right: 16rpx;
				position: relative;

				&::after {
					top: 0;
					right: 8rpx;
					bottom: 0;
					width: 2rpx;
					content: ' ';
					position: absolute;
					background: #0099FF;
				}

				&:last-child {
					padding-right: 0 !important;

					&::after {
						display: none;
					}
				}
			}
		}

		.area-bg {
			border-radius: 10rpx;
			background: #F7F7F7;
		}
	}
</style>